<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端圆形图片裁剪</title>
    <!-- 引入Cropper.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
    <style>
        /* 移动端适配样式 */
        .container {
            padding: 15px;
            max-width: 500px;
            margin: 0 auto;
        }
        
        #uploadBtn {
            display: block;
            width: 80%;
            margin: 20px auto;
            padding: 12px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
        }

        .cropper-container {
            max-width: 100%;
            margin: 15px 0;
        }

        #confirmBtn {
            width: 60%;
            margin: 10px auto;
            display: block;
            padding: 10px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 20px;
        }

        #result {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        /* 添加圆形裁剪框样式 */
        .cropper-view-box,
        .cropper-face {
            border-radius: 50%;
            overflow: hidden;
        }
        
        /* 隐藏裁剪框的边角控制点 */
        .cropper-line, 
        .cropper-point {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="file" id="fileInput" accept="image/*" hidden>
        <button id="uploadBtn">选择图片</button>
        <div class="cropper-container">
            <img id="imageSrc" src="#" alt="">
        </div>
        <button id="confirmBtn" disabled>确认裁剪</button>
        <div id="result"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
    <script>
        // JavaScript逻辑见下文
        document.addEventListener('DOMContentLoaded', () => {
    const uploadBtn = document.getElementById('uploadBtn');
    const fileInput = document.getElementById('fileInput');
    const imageSrc = document.getElementById('imageSrc');
    const confirmBtn = document.getElementById('confirmBtn');
    let cropper = null;

    // 触发文件选择
    uploadBtn.addEventListener('click', () => fileInput.click());

    // 文件选择处理
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                imageSrc.src = event.target.result;
                initCropper();
                confirmBtn.disabled = false;
            };
            reader.readAsDataURL(file);
        }
    });

    // 初始化Cropper
    function initCropper() {
        if (cropper) cropper.destroy();
        
        cropper = new Cropper(imageSrc, {
            aspectRatio: 1,  // 固定1:1比例
            viewMode: 1,     // 限制裁剪框不超过图片范围
            dragMode: 'move', // 移动模式更适合移动端操作
            autoCropArea: 0.8,  // 初始裁剪区域占图片的80%
            guides: false,    // 移动端隐藏辅助线
            cropBoxResizable: false, // 禁止调整裁剪框大小
            toggleDragModeOnDblclick: false, // 禁用双击切换模式
            minCropBoxWidth: 200,  // 最小裁剪框宽度
            minCropBoxHeight: 200, // 最小裁剪框高度
            ready() {
                // 设置固定200px裁剪框
                const containerWidth = this.cropper.containerData.width;
                const containerHeight = this.cropper.containerData.height;
                this.cropper.setCropBoxData({
                    width: 200,
                    height: 200,
                    left: (containerWidth - 200) / 2,
                    top: (containerHeight - 200) / 2
                });
            }
        });
    }

    // 确认裁剪处理
    confirmBtn.addEventListener('click', () => {
        const croppedCanvas = cropper.getCroppedCanvas({
            width: 200,  // 输出尺寸设置
            height: 200
        });
        
        // 转换为圆形并显示
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';
        const img = new Image();
        img.src = croppedCanvas.toDataURL('image/jpeg', 0.9);
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.objectFit = 'cover';
        resultDiv.appendChild(img);
    });
});
    </script>
</body>
</html>